<template>
	<view class="head-content">
		<view class="top" @click="getAddress">
			<image class='img' src="@/static/icon/position.png"></image>
			<span>当前位置：{{ address }}</span>
		</view>
		<view class="bottom" @click='goSearch'>
			<view class="address" @click.stop="getAddress">
				{{ getCity }}
			</view>
			<image class='search-img' src="@/static/icon/search.png"></image>
			<button class='btn'>搜索</button>
			<input class='input' type='text' placeholder="输入商品名称" />
		</view>
	</view>
</template>

<script>
	export default{
		computed:{
			getCity(){
				return this.$store.state.a.city
			},
			address(){
				return this.$store.state.a.address
			}
		},
		methods:{
			getAddress(){
				let that = this;
				if(that.$store.state.a.city == '定位中...'){
					uni.openSetting({
					  success(res) {
					    uni.showToast({
					    	title:'位置授权修改成功'
					    })
					  }
					});
				}else{
					uni.chooseLocation({
						success: function (res) {
							that.$store.state.a.address = res.name;
						}
					})
				}
			},
			goSearch(){
				uni.navigateTo({
					url: '/pages/tab1/view/search'
				})
			}
		}
	}
</script>

<style lang='scss'>
.head-content{
	width: 100%;
	.top{
		width: 93%;
		height: 50rpx;
    display: flex;
		align-items: flex-end;
		margin-left: 4%;
		.img{
			width: 35rpx;
			height: 35rpx;
		}
		span{
			width: calc(100% - 50rpx);
			margin-left: 10rpx;
			font-size: 24rpx;
			color: #999999;
			letter-spacing: 3rpx;
			overflow: hidden;
		  text-overflow: ellipsis;
		  white-space: nowrap;
		}
	}
	.bottom{
		width: 95%;
		height: 70rpx;
		margin-top: 20rpx;
		margin-left: 2.5%;
		display: flex;
		align-items: center;
		position: relative;
		.address{
			width: 20%;
	    height: 100%;
			position: absolute;
			border-right: 1rpx solid #00BFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 27rpx;
			color: #5E5E5E;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap
		}
		.input{
			width: 100%;
			height: 70rpx;
			border: 2rpx solid #00BFFF;
			background-image: linear-gradient(to right,#FFFFFF,#F0F8FF);
			padding-left: 28%;
			border-radius: 20px;
			font-size: 28rpx;
			color: #999999;
		}
		.search-img{
			width: 35rpx;
			height: 35rpx;
			position: absolute;
			z-index: 2;
			left: 22%;
		}
		.btn{
			width: 140rpx;
			height: 66rpx;
			line-height: 66rpx;
			border-radius: 20px;
			font-size: 28rpx;
			letter-spacing: 5rpx;
			color: white;
			position: absolute;
			z-index: 2;
			top: 1rpx;
			right: 5rpx;
			background-image: linear-gradient(to right,#00BFFF,#1E90FF);
		}
	}
}
</style>
